<template>
  <div class="wrapper">
        <div class="header-box">
            <header>
                <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
                <p>注册</p>
                <i></i>
            </header>
            <div class="top-ban"></div>
            <img src="../assets/header.png">
        </div>

        <table class="table-form">
            <tr>
                <td>手机号码</td>
                <td><input type="text" v-model="supervisorForm.telId" @blur="isExist" placeholder="请输入手机号码"></td>
            </tr>
            <tr>
                <td>真实姓名</td>
                <td><input type="text" v-model="supervisorForm.realName" placeholder="真实姓名便于我们联系您"></td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td><input type="date" v-model="supervisorForm.birthday" placeholder="出生日期"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" v-model="supervisorForm.sex" value="1">男
                    <input type="radio" v-model="supervisorForm.sex" value="0">女
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="supervisorForm.password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" v-model="supervisorForm.confirmPassword" placeholder="请再次输入密码"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="btn" @click="register">注册</div>
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup>
import { reactive, inject } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const axios = inject("axios");

const supervisorForm = reactive({
  telId: '',
  realName: '',
  birthday: '',
  sex: 1,
  password: '',
  confirmPassword: ''
});

const isExist = ()=>{
  axios
    .post("supervisor/getSupervisorById", supervisorForm)
    .then((response)=>{
      if(response.data!=''){
        alert('此手机号码已被注册！');
        supervisorForm.telId = '';
      }
    })
    .catch((error)=>{
      console.log(error);
    });
}

const register = ()=>{
  //表单验证
  if (supervisorForm.telId == "") {
    alert("电话号码不能为空！");
    return;
  }
  if (supervisorForm.telId.length != 11) {
    alert("电话号码必须为11位长度！");
    return;
  }
  if (isNaN(supervisorForm.telId)) {
    alert("电话号码必须由数字组成！");
    return;
  }
  if (supervisorForm.realName == "") {
    alert("真实姓名不能为空！");
    return;
  }
  if (supervisorForm.birthday == "") {
    alert("出生日期不能为空！");
    return;
  }
  if (supervisorForm.password == "") {
    alert("密码不能为空！");
    return;
  }
  if (supervisorForm.password != supervisorForm.confirmPassword) {
    alert("两次密码输入不一致！");
    return;
  }
  axios
    .post("supervisor/saveSupervisor", supervisorForm)
    .then((response)=>{
      if(response.data==1){
        alert('注册成功！');
        router.push('/login');
      }else{
        alert('注册失败！');
      }
    })
    .catch((error)=>{
      console.log(error);
    });
}
</script>

<style>

</style>